.play {
	display: flex;
	flex-direction: column;
	.main {
		flex-grow: 1;
		background-color: black;
		color: #fff;
		position: relative;
		#video {
			height: 100%;
			width: 100%;
		}
		h1 {
			position: absolute;
			bottom: 80px;
			left: 10px;
		}
		h3 {
			position: absolute;
			bottom: 40px;
			left: 10px;
			font-weight: normal;
		}
	}
	.progress {
		height: 90px;
		display: flex;
		justify-content: space-around;
		align-items: center;
		span {
			font-size: 40px;
		}
	}
	.progress-b {
		background-color: #4294ff;
		width: 0;
		height: 90px;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: -1;
	}
	#box1 {
		position: fixed;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		background: rgba(0, 100, 200, 0.8);
		display: none;
	}
	#box2 {
		position: fixed;
		top: 50%;
		left: 0;
		width: 100%;
		height: 60px;
		display: flex;
		justify-content: space-around;
		display: none;

		div {
			padding-top: 10px;
			width: 100px;
			height: 100px;
			border-radius: 50%;
			background-color: #ccc;
			text-align: center;
			color: #fff;
			span {
				display: block;
				font-size: 50px;
			}
		}
		#playbox {
			background-color: #79f0c2;
		}
		#end {
			background-color: #ff6060;
		}
	}
}
